<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	{%include file="public/head_common" /%}
	<link rel="stylesheet" href="__STATIC__/assets/css/plug.css">
	<link rel="stylesheet" href="__ROOT__/assets/addons/shopro/libs/element/element3.css">
</head>

<body>
	<!-- MAIN -->
	<div class="main" id="app">
		<!-- MAIN CONTENT -->
		<div class="main-content">
			<ul class="breadcrumb">
			    <li>仓库管理</li>
			    <li>仓库列表</li>
			</ul>
			<div class="container-fluid">
				<div class="row" style="margin-bottom: 10px;">
					<form class="form-inline">
						<input type="text" class="form-control" v-model="search.name" placeholder="仓库名称">
						<input type="text" class="form-control" v-model="search.number" placeholder="仓库编号">
						<input type="text" class="form-control" v-model="search.tel" placeholder="联系电话">
					    <button type="button" class="btn btn-primary" @click="getList()">查询</button>
					    <button type="button" class="btn btn-default" @click="resetForm()">重置</button>
						<button type="button" class="btn btn-primary" @click="openWarehouse(1)">添加</button>
					</form>
				</div>
				<!-- 数据开始-->
				<div class="row">
					<table class="table table-bordered table-hover">
						<thead>
							<tr>
								<th>仓库名称</th>
								<th>仓库编号</th>
								<th>联系人员</th>
								<th>联系电话</th>
								<th>仓库地址</th>
								<th>备注信息</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="row in rows">
								<td>{{ row.name }}</td>
								<td>{{ row.number }}</td>
								<td>{{ row.contacts }}</td>
								<td>{{ row.tel }}</td>
								<td>{{ row.add }}</td>
								<td>{{ row.data }}</td>
								<td>
									<a href="#" @click="openWarehouse(2,row)" ><i class="fa fa-pencil"> </i>  修改</a>
									<a href="#" style="color:red" @click="del(row.id)"><i class="el-icon-delete"></i> 删除</a>
								</td>
							</tr>
							<tr v-if="rows.length===0">
								<td colspan="8" style="color:red">查询无记录</td>
							</tr>
						</tbody>
					</table>
					<div id="pageBar">
						<vue-page :total_page='total_page' :cur_page='cur_page' @do-page='getList'></vue-page>
					</div>
				</div>
				<!-- 数据结束-->				
			</div>
		</div>
		<!-- 添加、修改 仓库 -->
		<!-- 修改物流 -->
		<el-dialog
		:title="title"
		:visible.sync="showModal"
		@close="warehouseClose"
		width="30%">
			<el-input style="margin-top:10px;" v-model="warehouseItem.name" placeholder="请输入仓库名称" size="normal" clearable></el-input>
			<el-input style="margin-top:10px;" v-model="warehouseItem.number" placeholder="请输入仓库编号" size="normal" clearable></el-input>
			<el-input style="margin-top:10px;" v-model="warehouseItem.contacts" placeholder="请输入联系人员" size="normal" clearable></el-input>
			<el-input style="margin-top:10px;" v-model="warehouseItem.tel" placeholder="请输入联系电话" size="normal" clearable></el-input>
			<el-input style="margin-top:10px;" v-model="warehouseItem.add" placeholder="请输入仓库地址" size="normal" clearable></el-input>
			<el-input style="margin-top:10px;" v-model="warehouseItem.data" placeholder="请输入备注" size="normal" clearable></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showModal = false">取 消</el-button>
				<el-button type="primary" @click="warehouseUpdate">确 定</el-button>
			</span>
		</el-dialog>
		<!-- END MAIN CONTENT -->
	</div>	
	<!-- 商品编辑模板 -->
	<!-- Javascript -->
	<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
	<script src="__STATIC__/assets/vendor/vue.js"></script>
	<script src="__STATIC__/components/vue-page.js"></script>
	<script src="__STATIC__/components/vue-select.js"></script>
	<script src="__STATIC__/components/vue-modal.js"></script>
	<script src="__STATIC__/assets/vendor/layer-v3.1.1/layer/layer.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/element/element.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				search: {
					name: '',
					number: '',
					tel:''
				},
				rows: [],
				total_page: 0,
				cur_page: 1,
				showModal: false,
				title:'',
				warehouseItem:{
					id:'',
					name:'',
					number:'',
					tel:'',
					add:'',
					data:'',
					contacts:'',
				},
			},
			components: {
				'vue-page': vuePage,
				'vue-select': vueSelect,
			},
			created: function(){
				this.getList();
			},
			methods:{
				openWarehouse(type = 1,row){
					console.log(type);
					console.log(row);
					if(type == 1){
						this.title = '添加仓库';
						
					}else{
						this.title = '修改仓库';
						this.warehouseItem = row;
					}
					
					this.showModal = true;
				},
				warehouseClose(){
					this.warehouseItem = {
						id:'',
						name:'',
						number:'',
						tel:'',
						add:'',
						data:'',
						contacts:'',
					};
				},
				warehouseUpdate() {
					let t = this;
					$.post("{%:url('Warehouse/set_warehouse')%}",this.warehouseItem,function(rsp){
						console.log({rsp});
						if(rsp.code == 1){
							t.$message.success(rsp.msg);
							t.showModal = false;
							
						}else{
							t.$message.error(rsp.msg);
						}
						t.getList();
					},'json')
				},
				getList: function(page=1){
					var _this = this;
					var data = this.search;
					$.post("{%:url('Warehouse/warehouse_list')%}?page=" + page,data,function(rsp){
						console.log({rsp});
						_this.rows = rsp.data.rows;
						_this.total_page = rsp.data.total_page;
						_this.cur_page = Number(rsp.data.page);
					},'json')
				},
				resetForm: function(){
					for (var i in this.search){
						this.search[i] = '';
					}
				},
				del(id){
					$.post("{%:url('Warehouse/del_warehouse')%}?id=" + id,{},(rsp) => {
						this.getList(this.cur_page);
					},'json')
				}	
			}
		});
		var tip_index;
		//鼠标事件
		$('table').on('mouseover','a.pre_view',function(){
			tip_index = layer.tips("<img src='"+$(this).attr('href')+"' height='220'>", this, {
				tips: [2, '#eee'],
				time: 0
			});
		}).on('mouseleave','a.pre_view',function(){
			layer.close(tip_index);
		})	
	</script>
</body>

</html>